<template>
  <div class="app-container rela">
    <div class="areaZone" v-loading="showParkInfo" >
      <h3>当前园区信息</h3>
      <!-- <el-row style="border-bottom: 1px solid #ddd; padding: 15px 0;">
        <el-col :offset="1" :span="4" style="text-align:right">园区名称：</el-col>
        <el-col :offset="1" :span="15">{{ form.name }}</el-col>
      </el-row>
      <el-row style="border-bottom: 1px solid #ddd; padding: 15px 0;">
        <el-col :offset="1" :span="4" style="text-align:right">主要行业：</el-col>
        <el-col :offset="1" :span="15">{{ form.industryPid }}</el-col>
      </el-row>
      <el-row style="border-bottom: 1px solid #ddd; padding: 15px 0;">
        <el-col :offset="1" :span="4" style="text-align:right">行业子类：</el-col>
        <el-col :offset="1" :span="15">{{ industrySonId }}</el-col>
      </el-row>
      <el-row style="border-bottom: 1px solid #ddd; padding: 15px 0;">
        <el-col :offset="1" :span="4" style="text-align:right">园区地址：</el-col>
        <el-col :offset="1" :span="15">{{ form.address }}</el-col>
      </el-row> -->
      <el-form ref="form" :model="form" label-width="90px" :rules="rules" >
        <el-form-item label="园区名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="主要行业" prop="industryPid">
          <el-select v-model="form.industryPid" placeholder="请选择" @change="sureChange">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行业子类" v-show="sonLiShow">
          <el-select v-model="industrySonId" placeholder="请选择">
            <el-option
              v-for="item in sonTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="园区地址" prop="address">
          <el-input type="textarea"  :rows="6" v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:45px">
          <div>
            <el-button type="primary" @click="onSubmit('form')">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import { ApiGetParkList,ApiParkInfo,getUpDataList, subAPI} from './api' 
  export default {
    data() {
      return {
        visible:false,
        typeList:[],
        sonTypeList: [],
        industrySonId: 0,
        form:{
          industryPid: undefined, // 父行业，若没有子值，直接传递当前值,
        },
        rules: {
          name: [{ required: true, message: '请填写园区名称', trigger: 'change' }],
          industryPid: [{ required: true, message: '请选择行业', trigger: 'change' }],
          address: [{required: true, message: '请填写园区地址', trigger: 'change'}]
        },
        paging:{
          pageNo:1,
          pageSize:10
        },
        total:0,
        sonLiShow:false,
        showParkInfo: true
      }
    },
    created() {
      this.getParkInfo()
    },
    mounted() {
      this.getUpData()
    },
    methods:{
      // 获取当前园区内容
      async getParkInfo() {
        const targetPark = await ApiGetParkList(this.paging)
        const muchData = await ApiParkInfo({ id: targetPark.records[0].id })
        this.form.industryPid = muchData.industryPid // 返回的父节点
        this.industrySonId = muchData.mainIndustryId // 返回当前行业节点
        const twolist = await getUpDataList({id: muchData.industryPid}) // 子行业节点列表
        if(twolist.length > 0){
          this.sonLiShow = true
          this.sonTypeList = twolist
        }
        this.form = muchData
        this.showParkInfo = false
      },
      // 获取园区详细信息
      async getMuchData(id) {
        const muchData = await ApiParkInfo({ id: id })
        this.form.industryPid = muchData.industryPid // 返回的父节点
        this.industrySonId = muchData.mainIndustryId // 返回当前行业节点
        const twolist = await getUpDataList({id: muchData.industryPid}) // 子行业节点列表
        if(twolist.length > 0){
          this.sonLiShow = true
          this.sonTypeList = twolist
        }
        this.form = muchData
        this.visible = true
      },
      // 获取行业下拉列表
      getUpData() {
        getUpDataList({id: 0}).then(res => {
          this.typeList = res
        })
      },
      // 点击第一个下拉框 获取第二个下啦框数据
      sureChange(val) {
        getUpDataList({id: val}).then(res => {
          if(res.length <= 0){
            this.sonLiShow = false
            this.industrySonId = 0
          }else{
            this.sonTypeList = res
            this.industrySonId = this.sonTypeList[0].id 
            this.sonLiShow = true
          }
        })
      },
      // 保存表单
      onSubmit (form) {
        this.$refs[form].validate((valid) => {
          if(this.industrySonId !== 0) {
            this.form.mainIndustryId = this.industrySonId
          } else {
            this.form.mainIndustryId = this.form.industryPid
          }
          if (valid) {
            subAPI(this.form).then(res => {
              this.showParkInfo = true
              this.getParkInfo()
            })
          } else {
            return false
          }
        });
      },
  }
}
</script>
<style lang="scss" scoped>
.areaZone{margin:50px auto 0; width: 650px; min-height:450px; border:1px solid #ddd; padding:20px 10px 0 50px; border-radius:6px; background: #F2F2F2; min-height: 600px;}
.areaZone h3{margin: 30px 0;}
.app-container { height: 100%; padding:vw(25px);border:1px solid #ccc;}
.upStr{color: #0084EE;}
::v-deep .infoDetailBox .el-dialog{border-radius: 4px;}
::v-deep .el-input,.el-textarea{ width: vw(400px);}
::v-deep .el-form-item__error{left:15%}
::v-deep .el-form-item .el-form-item__content{padding-left:vw(20px)}
::v-deep .pagination .el-input{width: vw(40px);}
::v-deep .el-input__inner{height: vw(34px);}
</style>
